<template>
    <div class="cont">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
    <div class="flex-container1">
        <div class="flex-item">1</div>  
        <div class="flex-item">2</div>  
        <div class="flex-item">3</div>  
        <div class="flex-item">4</div>  
        <div class="flex-item">5</div>  
        <div class="flex-item">6</div>  
        <div class="flex-item">7</div>  
        <div class="flex-item">8</div>  
        <div class="flex-item">9</div>  
        <div class="flex-item">10</div>
    </div>
</template>
<script setup>
import {ref} from 'vue'
const state = ref({
    name:'shun',
    index:0
})
const add = ()=>{
    state.value.index ++;
}
/**
 * flex-direction
 *  row 从左到右
 *  row-reverse 从右到左
 *  column 从上到下
 *  column-reverse 从下到上
 * flex-wrap
 *  nowrap 子元素不换行
 *  wrap 子元素换行
 *  wrap-reverse 子元素向上换行
 * 
 */
//flex-direction
//flex-wrap
//flex-flow
//justify-content
//align-items
//align-content
</script>
<style lang="less" scoped>
.cont{
    width:100vw;
    height: 100vh;
    display: flex;
    flex-direction: column-reverse;
    display: none;
    .box{
        width: 50px;
        height: 50px;
        border: solid 1px red;
        line-height: 50px;
        text-align: center;
    }
}
.flex-container1{
    display: flex;  
    flex-flow: row wrap; /* 设置主轴为水平和允许换行 */  
    justify-content: flex-start;  
    align-items: stretch;  
    margin-bottom: 20px;  
    padding: 10px;  
    width: 800px;
    border: 1px solid #000;
    .flex-item {
        flex: 0 0 100px; /* 不允许弹性伸缩，固定宽度为 100px */  
        height: 50px;
        margin: 5px;  
        background-color: #999;  
        color: #fff;  
        text-align: center;  
        line-height: 50px;  
        border: 1px solid #666;  
    }
}
</style>
